<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="static/index.css">
    <script type="text/javascript" src="static/qs.min.js"></script>
    <title>我的案例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            background: #00499e;
        }

        #app {
            padding: 20px;
            border: 15px solid #00499e;
            background: white;
            border-radius: 25px;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            box-sizing: border-box;
            font-size: 14px;
            overflow-y: auto;
        }

        #app.isPc {
            height: auto;
        }

        .primary {
            color: #409EFF;
        }

        .page-header {
            color: #333;
            margin-left: -10px;
            margin-bottom: 10px;
            font-size: 16px;
            text-align: center;
            flex-shrink: 0;
        }

        .mobile-table {
            flex: 1;
            height: 96%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 10px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            font-size: 13px;
            margin-bottom: 2px;
        }

        .mobile-card {
            margin-bottom: 20px;
            position: relative;
        }

        .mobile-name {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            line-height: 24px;
            margin-bottom: 10px;
        }

        .mobile-right {
            float: right;
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }

        .mobile-row .el-col {
            margin-top: 10px;
        }

        .pc-pagination {
            padding: 10px;
            text-align: right;
        }

        .tips {
            color: #aaa;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            text-align: center;
        }

        .tips i {
            font-size: 20px;
        }

        .detail {
            font-size: 12px;
            color: #dedede;
            margin-top: 10px;
            margin-bottom: -10px;
            text-align: center;
        }

        .el-message-box {
            width: 80%;
            max-width: 400px;
        }

        .el-dialog {
            max-width: 600px;
        }

        .form-input, .form-select {
            width: 100%;
        }

        .card-selected {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 20px;
            color: #aaa;
        }

        .selected {
            color: #1279ff;
        }
    </style>
</head>

<body>
<div id="app" :class="{isPc: !isMobile}">
    <div class="page-header">
        <i v-if="!editStatus" style="float: left;font-size: 20px;color:#1379ff;margin-left: 22px;cursor:pointer;" @click="back"
           class="el-icon-back"></i>
        <i class="el-icon-document" style="margin-right: 10px;color: #1279ff;"></i>{{title}}
        <i v-if="isMobile && !editStatus" style="float: right;font-size: 20px;color:#1379ff;margin-left: 10px;"
           @click="edit('add')" class="el-icon-plus"></i>
        <span v-if="!isMobile && !editStatus" style="float: right;font-size: 18px;color:#1379ff;margin-left: 10px;cursor:pointer;"
           @click="edit('add')"> 新 增 </span>
    </div>
    <div class="pc-table" v-if="!isMobile" v-loading="loading">
        <el-table :data="list" stripe>
            <el-table-column prop="almc" label="案例名称"></el-table-column>
            <el-table-column prop="xmdm" label="项目名称"></el-table-column>
<!--            <el-table-column prop="alzt" label="案例状态"></el-table-column>-->
            <el-table-column prop="qxdmmc" label="案例区县名称"></el-table-column>
            <el-table-column prop="xxdmmc" label="案例学校名称"></el-table-column>
            <el-table-column prop="xuxm" label="用户姓名"></el-table-column>
            <el-table-column prop="xtime" label="更新时间"></el-table-column>
            <el-table-column prop="alzt" label="案例材料">
                <template slot-scope="scope">
                    <el-button type="text" size="text" @click="goDocument(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="primary" size="mini" @click="edit('show', scope.row)">详情</el-button>
                        <el-button type="primary" size="mini" @click="edit('modify', scope.row)"
                                   icon="el-icon-edit-outline"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="deleteCase(scope.row)"></el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="pc-pagination">
            <el-pagination @current-change="changePage" background layout="prev, pager, next"
                           :current-page.sync="params.page" :total="params.total"></el-pagination>
        </div>
    </div>
    <div class="mobile-table" v-else v-infinite-scroll="loadData" infinite-scroll-disabled="disabled">
        <el-card v-for="(item, index) of list" :key="index" class="mobile-card" @click.native="handleClickCard(item)">
            <i class="el-icon-success card-selected" v-if="editStatus" :class="{selected: item.selected}"></i>
            <div class="mobile-name">{{item.almc}}</div>
            <el-row class="mobile-row">
                <el-col :span="12" v-if="item.xmmc">
                    {{item.xmmc}}
                    <!--                    项目名称:-->
                </el-col>
                <el-col :span="12" v-if="item.qxdmmc">
                    <i class="el-icon-location-information primary"></i> {{item.qxdmmc}}
                </el-col>
                <el-col :span="12" v-if="item.xxdmmc">
                    <i class="el-icon-school primary"></i> {{item.xxdmmc}}
                </el-col>
                <el-col :span="12"><i class="el-icon-user primary"></i> {{item.xuxm}}</el-col>
                <el-col :span="12"><i class="el-icon-time primary"></i> {{item.xtime}}</el-col>
            </el-row>
            <div style="text-align: right;margin-top: 15px;" v-if="!editStatus">
                <el-button type="text" size="mini" style="float: left;" @click.prevent.stop="goDocument(item)">查看案例材料
                </el-button>
                <el-button v-if="right.M" type="primary" plain size="mini"
                           @click.prevent.stop="edit('modify', item)"
                           icon="el-icon-edit-outline"></el-button>
                <el-button v-if="right.D" type="danger" plain size="mini" icon="el-icon-delete"
                           @click.prevent.stop="deleteCase(item)"></el-button>
            </div>
        </el-card>
        <div v-if="loading" class="tips"><i class="el-icon-loading"></i></div>
        <div v-if="noMore && !loading" class="tips">—— 我也是有底线的 ——</div>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="static/vue.js"></script>
<!-- import JavaScript -->
<script src="static/index.js"></script>
<script src="static/axios.min.js"></script>
<script>
    var pageparm = getQueryString("pageparm"),
        formMap = {
            pageparm: '项目名称',
            alzt: '案例状态',
            xxdm: '案例学校名称',
            qxdm: '案例区县名称'
        };
    new Vue({
        el: '#app',
        data: function () {
            return {
                title: '我的案例',
                editStatus: false,
                formMap,
                loading: true,
                visible: false,
                right: {
                    A: true,
                    M: true,
                    D: true
                },
                pageparm: getQueryString('pageparm'),
                params: {
                    size: 8,
                    page: 1,
                    total: 0,
                    pageparm: getQueryString('pageparm'),
                    alzt: '',
                    qxdm: '',
                    xxdm: ''
                },
                list: [],
                isMobile: !IsPC()
            }
        },
        computed: {
            noMore() {
                return this.list.length >= this.params.total
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            back() {
                history.back()
            },
            handleClickCard(row) {
                this.edit('show', row)
            },
            goDocument(row) {
                location.href = './PSALDETAIDOC.html?alid=' + row.alid
            },
            deleteCase(row) {
                var that = this
                this.$confirm('是否确定删除' + row.almc + '?').then(function (flag) {
                    if (flag) {
                        var params = {
                            act: 'Delete',
                            alid: row.alid,
                            pageparm: that.params.pageparm
                        }
                        axios.get(baseUrl + 'PSAL/PSALMYLST', {params}).then(function (res) {
                            if (res.status === 200) {
                                if (that.isMobile) {
                                    that.params.page = 1
                                }
                                that.changePage()
                            }
                        })
                    }
                })
            },
            edit(type, row) {
                var url = './PSALDETAI.html?type=' + type
                if (type !== 'add') {
                    url = url + '&alid=' + row.alid
                } else {
                    url = url + '&redir=' + 'PSALMYLST'
                }
                location.href = url
            },
            getData() {
                var params = {
                    act: 'Rdata',
                    pagesize: this.params.size,
                    pageindex: this.params.page,
                    pageparm: this.params.pageparm
                }
                for (var key in this.params) {
                    if (this.params.hasOwnProperty(key) && (typeof this.params[key] === 'string') && this.params[key]) {
                        params[key] = this.params[key]
                    }
                }
                return axios.get(baseUrl + 'PSAL/PSALMYLST' + pageparm, {
                    params: params
                })
            },
            loadData() {
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    if (res.status === 200 && res.data) {
                        var data = res.data
                        data.rows.forEach(function (item) {
                            item.selected = false
                            that.list.push(item)
                        })
                        that.params.total = data.total
                        that.params.page++
                    } else {
                        that.list = []
                    }
                    that.loading = false
                })
            },
            changePage() {
                var that = this
                that.loading = true
                that.getData().then(function (res) {
                    that.loading = false
                    if (res.status === 200) {
                        that.list = res.data.rows.map(function (item) {
                            item.selected = false
                            return item
                        })
                        that.params.total = res.data.total || []
                        if (that.isMobile) {
                            that.params.page++
                        }
                    }
                })
            },
            getInitData() {
                let that = this
                axios.get(baseUrl + 'PSAL/PSALMYLST', {params: {act: 'pinit'}}).then(function (res) {
                    if (res.status === 200) {
                        that.params.pageparm = res.data.pzluserid
                        that.title = res.data.mkmc || that.title
                        document.title = that.title
                        that.changePage()
                        if (res.data.rightid) {
                            for (var i = 0; i < res.data.rightid.length; i++) {
                                that.right[res.data.rightid[i]] = true
                            }
                        }
                    }
                })
            },
            getTypes(type) {
                let that = this
                return axios.get(baseUrl + 'xctrl/getdmjson/' + type).then(function (res) {
                    if (res.status === 200) {
                        that[type.split('-')[1] + 's'] = res.data
                    }
                })
            },
            resize() {
                this.isMobile = window.innerWidth <= 768
            }
        },
        created() {
            this.getInitData()
        },
        mounted() {
            window.addEventListener('resize', this.resize)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.resize)
        }
    })
</script>

</html>